<template>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-row class="table-head-box">
        <el-col :span="4" class="flex flex-start">
          <el-button
            type="primary"
            icon="el-icon-plus"
            plain
            @click="addPetTypeHandler()"
            >添加宠物分类</el-button
          >
        </el-col>
        <el-col :span="20" class="flex flex-end input-box">
          <el-input
            v-model="search.lkParam.type_name"
            clearable
            placeholder="分类名称"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="searchHandler"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="petTypeList"
      border
      style="width: 100%"
      tooltip-effect="dark"
      size="mini"
      row-key="typeId"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="60"> </el-table-column>
      <el-table-column prop="typeId" label="编号"> </el-table-column>
      <el-table-column prop="typeName" label="宠物分类名称"> </el-table-column>
      <el-table-column prop="typeLevel" label="等级"> </el-table-column>
      <el-table-column prop="sysRecommend" label="是否推荐">
        <template slot-scope="scope">
          <el-switch
            v-if="scope.row.typeLevel < 3"
            v-model="scope.row.sysRecommend"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="updateSysRecommendHandler(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            class="el-icon-edit"
            type="primary"
            size="mini"
            @click="updatePetTypeHandler(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.typeLevel < 3"
            type="plain"
            class="el-icon-plus"
            size="mini"
            @click="addSubPetTypeHandler(scope.$index, scope.row)"
            >添加子类型</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-row>
        <el-col :span="24" style="text-align:right;">
            <el-pagination background layout="total,prev, pager, next" :page-count="page.size" :total="page.total" @current-change="sizeChangeHandler"> </el-pagination>
        </el-col>
    </el-row> -->
    <PetTypeAdd
      :petTypeDialog="showPetTypeDialog"
      :popPetType="petType"
      v-on:close="closeHandler"
    ></PetTypeAdd>
  </div>
</template>
<script>
import { petTypeListUrl, petTypeSaveUrl } from "@/utils/common";
import PetTypeAdd from "./pet-type-add";
export default {
  components: {
    PetTypeAdd,
  },
  data() {
    return {
      petTypeList: [],
      petType: {},
      parentPetType: {},
      showPetTypeDialog: false,
      search: {
        current: 1,
        size: 10,
        total: 0,
        lkParam: { typeName: "" },
        eqParam: { typeName: "" },
      },
    };
  },
  mounted() {
    this.loadPetTypes();
  },
  methods: {
    addPetTypeHandler: function () {
      //添加顶级分类
      this.petType = { typeLevel: 1, typeParent: "00" };
      this.showPetTypeDialog = true;
    },
    addSubPetTypeHandler: function (index, row) {
      //添加下一级,默认拼接子菜单编码
      let code = 1;
      if (row.children) {
        code += row.children.length;
      }

      if (code > 9) {
        this.petType = {
          typeLevel: row.typeLevel + 1,
          typeParent: row.typeId,
          typeId: row.typeId + "" + code,
        };
      } else {
        this.petType = {
          typeLevel: row.typeLevel + 1,
          typeParent: row.typeId,
          typeId: row.typeId + "0" + code,
        };
      }

      this.showPetTypeDialog = true;
    },
    updateSysRecommendHandler(row) {
      this.axios
        .post(petTypeSaveUrl, row)
        .then((res) => {
          if (res.data.status == "SUCCESS") {
            this.$message.success(res.data.result);
          } else {
            this.$message.error(res.data.result);
          }
        })
        .catch((response) => {
          console.log("response - " + response);
          this.$message.error("数据保存异常失败");
        });
    },
    updatePetTypeHandler: function (index, row) {
      this.PetType = row;
      this.showPetTypeDialog = true;
    },
    closeHandler: function () {
      this.showPetTypeDialog = false;
      this.loadPetTypes();
    },
    /**
     * 删除用户
     */
    // deleteUserHandler: function (index, row) {
    //   this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" })
    //     .then(() => {
    //       this.axios
    //         .post("/fc/su/del/" + row.userId)
    //         .then(response => {
    //             console.log(response)
    //           this.$message({ type: "success", message: "删除成功!"  });
    //           this.loadPetTypes();
    //         })
    //         .catch(response => {
    //             console.log(response)
    //           this.$message({ type: "warn", message: "删除失败!"  });
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({ type: "info", message: "已取消删除" });
    //     });
    // },
    loadPetTypes() {
      this.axios
        .post(petTypeListUrl, this.search.lkParam)
        .then((response) => {
          var data = response.data.data;
          this.petTypeList = data;
        })
        .catch((response) => {
          console.log("response -   " + response);
        });
    },
    sizeChangeHandler: function (value) {
      this.page.current = value;
      this.loadPetTypes();
    },
    searchHandler: function () {
      this.loadPetTypes();
    },
  },
};
</script>
<style scoped>
.grid-content {
  text-align: left;
  height: 45px;
}
</style>
